<template>
  <div class="ratingselect border-bottom">
    <!--评价类型的三个区块-->
    <div class="rating-type border-bottom">
      <span 
        class="block positive" 
        :class="{'active':selectType===2}"
        @click='select(2,$event)'  
      >
        {{desc.all}}
        <span class="count">{{ratings.length}}</span>
      </span>
      <span 
        class="block positive" 
        :class="{'active':selectType===0}"
        @click='select(0,$event)'  
      >
        {{desc.positive}}
        <span class="count">{{positives.length}}</span>
      </span>
      <span 
        class="block negative" 
        :class="{'active':selectType===1}"
        @click='select(1,$event)'  
      >
        {{desc.negative}}
        <span class="count">{{negatives.length}}</span>
      </span>
    </div>
    <!--是否只看有内容的评价--->
    <div class="switch" :class="{'on':onlyContent}"  @click="toggleContent">
      <span class="iconfont">&#xe63b;</span>
      <span class="text">只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
const POSITIVE = 0;//正面评价
const NEGATIVE = 1;//负面评价
const ALL = 2;//默认是选择所有的评价

export default {
  name:'ratingselect',
  props:{
    //评价的数据项
    ratings: {
      type: Array,
      default() {
        return [];
      }
    },
    //选择的类型：全部，满意，不满意/所有，推荐，不推荐
    selectType: {
      type: Number,
      default: ALL
    },
    //是否只读有内容的评价
    onlyContent: {
      type: Boolean,
      default: false
    },
    //评价的三种类型
    desc: {
      type: Object,
      default() {
        return {
          all: '全部',
          positive: '满意',
          negative: '不满意'
        };
      }
    }
  },
  methods:{
    //为了点击之后绑定相应的点击样式
    select(type,event){
      if(!event._constructed){
        return;
      }
     //通知父组件,改变数据
      this.$emit('selecttypechange',type)
    },
    toggleContent(event){
      if(!event._constructed){
        return;
      }
      //通知父组件，改变数据
      this.$emit('onlycontentchange')
    }
  },
  computed:{
    positives() {
      return this.ratings.filter((rating) => {
        return rating.rateType === POSITIVE;
      });//返回评价类型为positive的数组，使用.filter方法
    },
    negatives() {
      return this.ratings.filter((rating) => {
        return rating.rateType === NEGATIVE;
      });
    },
  }
}
</script>

<style lang="stylus" scoped>
.ratingselect 
  &.border-bottom:before 
    border-color:rgba(7,17,27,.1)
  .rating-type
    padding:18px 0  
    margin:0 18px
    font-size:0
    &.border-bottom:before 
      border-color:rgba(7,17,27,.2)
    .block
      display:inline-block 
      padding:8px 12px 
      margin-right:8px 
      border-radius:1px
      line-height:16px
      font-size:12px
      color:rgb(77,85,93)
      &.active 
        color:#fff//点中的字体颜色为白色
      &.positive 
        background-color:rgba(0,160,220,.2)
        &.active 
          background-color:rgb(0,160,220)//选中后透明度为0
      &.negative 
        background-color:rgba(77,85,93,.2)
        &.active 
          background-color:rgb(77,85,93)//选中后透明度为0
      .count 
        font-size:8px
  .switch
    padding:12px 18px 
    line-height:24px 
    color:rgb(147,153,159)
    &.on //当状态为on时，按钮变换颜色
      .iconfont 
        color:#00c85c
    .iconfont 
      font-size:24px
      margin-right:4px
      vertical-align:middle
    .text 
      font-size:12px
      vertical-align:middle
</style>